<template>
    <div class="home">
        <div class="home-left">
        <img
            class="pic"
            src="../../static/images/home.png"/>
            <List :list="listData" />
        </div>
        <div class="home-right">
            <Recommend />
        </div>
    </div>
</template>

<script>
    import axios from "axios";
    import List from "@/components/List.vue";
    import Recommend from "@/components/Recommend.vue";
    export default {
        name: "home",
        data() {
            return {
                listData: []
            };
        },
        components: { List,Recommend },
        methods: {
            getList() {
                axios.get("../../static/api/home.json").then(res => {
                    this.listData = res.data.data.listInfo;
                });
            }
        },
        mounted() {
            this.getList();
        }
    };
</script>

<style scoped>
.home {
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
}
.home-left {
    float: left;
    width: 625px;
    margin-left: 15px;
    padding-top: 20px;
}
.pic {
    width: 625px;
    height: 270px;
    border-radius: 8px;
}
.home-right {
    float: right;
    width: 280px;
    margin-top: 20px;
}
</style>